import { Badge, Descriptions, Image, Tag, message, Tooltip, Pagination, Table, Skeleton } from 'antd';
import "../../index.css"
import { useEffect, useState } from 'react';
import { GetGoodsOrderDetails, GetInventorys, GetSingleGoods } from '../../api/goods';
import { useParams } from 'react-router-dom';
import dayjs from 'dayjs';


const GoodDetail = () => {
  document.info = [
    {
      title: "商品详情",
      url: "/goods/detail",
    },
    {
      title: "商品管理",
      url: "/goods",
    }
  ];
  //详情数据
  const [detail, setDetail] = useState({
  });

  //描述列表
  const items = [
    {
      key: '1',
      label: '名称',
      children: detail.name
    },
    {
      key: '2',
      label: '类型',
      children: detail.type
    },
    {
      key: '3',
      label: '供应商',
      children: detail.supplier == null ?
        <Tag color='red'  className='danger-tag' bordered={false}>直营</Tag> :
        <Tag color='blue' bordered={false} className='primary-tag'>{detail.supplier}</Tag>
    },
    {
      key: '4',
      label: '生产日期',
      children: detail.birthday
    },
    {
      key: '5',
      label: '保质期(天)',
      children: detail.expiryday
    },
    {
      key: '6',
      label: '规格',
      children: detail.specs
    },
    {
      key: '7',
      label: '价格',
      children: <Tag color='red' className='danger-tag' bordered={false}>￥ {detail.price}</Tag>
    },
    {
      key: '8',
      label: '上架',
      children: detail.isShelve == 1 ?
        <Tag color='success' className='success-tag' bordered={false}>是</Tag> :
        <Tag color='red' className='danger-tag'>否</Tag>
    },
    {
      key: '9',
      label: '封面',
      children: <Image width={50} src={detail.photo}></Image>,
    },
    {
      key: '10',
      label: '销量',
      children: <Tag color='blue' className='primary-tag' bordered={false}>{detail.sales}</Tag>

    },
    {
      key: '11',
      label: '库存',
      children: <Tag color='blue' className='primary-tag' bordered={false}>{detail.inventory}</Tag>
    },
    {
      key: '12',
      label: '禁用',
      children: detail.isBan == 0 ?
        <Tag color='success' className='success-tag' bordered={false}>否</Tag> :
        <Tag color='red' className='danger-tag'>是</Tag>

    },
    {
      key: '13',
      label: '添加时间',
      children: <Tag color='blue' className='primary-tag' bordered={false}>{detail.time}</Tag>
    },
    {
      key: '14',
      label: '描述',
      children: detail.explain,
    },
  ]




  //获取销售数据详情
  const [goodsOrder, setGoodsOrder] = useState({
    page: 1,
    limit: 10,
    total: 0,
    data: [],
    loading: false,
  });

  //获取库存数据
  const [inventorys, setInventorys] = useState({
    page: 1,
    limit: 10,
    total: 0,
    data: [],
    loading: false,
  });

  //获取路径id
  const { id } = useParams();
  //骨架屏
  const [isFirst, setFirst] = useState(true);

 
  const sDetail=()=>{
    message.info("暂无收货详情")
  }
  // 销售数据详情
  const columns_goodsOrder = [
    {
      title: '序号',
      dataIndex: 'Index',
      key: 'Index',
      with: 20

    },
    {
      title: '详情号',
      dataIndex: 'id',
      key: 'id',
      ellipsis: {
        showTitle: false,
      },
      with: 80,
      render: (text) => (<Tooltip placement="topLeft" title={text}>{text}</Tooltip>),

    },

    {
      title: '供应商',
      dataIndex: 'isDirectly',
      key: 'isDirectly',
      ellipsis: {
        showTitle: false,
      },
      width: 130,
      render: (text, hang) => (
        // <Tooltip placement="topLeft" title={text}>
        <div>
          {
            text === 1 ? <Tag color='red' className='danger-tag' bordered={false}>自营</Tag> :
              <Tag color='blue' bordered={false} className='primary-tag'>{hang.merchant}</Tag>
          }</div>

        // </Tooltip>
      )
    },
    {
      title: '商户',
      dataIndex: 'merchant',
      key: 'merchant',
      ellipsis: {
        showTitle: false,
      },
      width: 100,
      render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>

    },
    {
      title: '商品',
      dataIndex: 'name',
      key: 'name',
      ellipsis: {
        showTitle: false,
      },
      width: 100,
      render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
    },
    {
      title: '数量',
      dataIndex: 'number',
      key: 'number'
    },

    {
      title: '单价',
      dataIndex: 'price',
      key: 'price',
      ellipsis: {
        showTitle: false,
      },
      width: 90,
      render: (text) => <Tooltip placement="topLeft" title={text}>
        <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
      </Tooltip>
    },


    {
      title: '总价',
      dataIndex: 'money',
      key: 'money',
      ellipsis: {
        showTitle: false,
      },
      width: 90,
      render: (text) => <Tooltip placement="topLeft" title={text}>
        <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
      </Tooltip>
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
      ellipsis: {
        showTitle: false,
      },
      width: 100,
      render: (text) => <Tooltip placement="topLeft" title={text}>
        {text}
      </Tooltip>
    },
    {
      title: '发货',
      dataIndex: 'isSend',
      key: 'isSend',
      width: 60,
      render: (text) => (
        <div>
          {text == 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
          {text == 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
        </div>
      )
    },

    {
      title: '收货',
      dataIndex: 'isReceive',
      key: 'isReceive',
      width: 60,
      render: (text) => (
        <div>
          {text === 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
          {text === 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
        </div>
      )
    },
    {
      title: '收货数量',
      dataIndex: 'receiveNumber',
      key: 'receiveNumber'
    },
    {
      title: '收货金额',
      dataIndex: 'receiveMoney',
      key: 'receiveMoney',
      ellipsis: {
        showTitle: false,
      },
      width: 90,
      render: (text) => <Tooltip placement="topLeft" title={text}>
        <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
      </Tooltip>
    },
    {
      title: '完成',
      dataIndex: 'isComplete',
      key: 'isComplete',
      width: 60,
      render: (text) => (
        <div>
          {text === 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
          {text === 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
        </div>
      )
    },




    {
      title: '操作',
      dataIndex: '',
      key: '',
      width: 150,
      fixed: 'right',
      render: (text, hang) => <div className='primary-cell btn' onClick={()=>{sDetail()}}>收货详情</div>
    },


  ];

  //库存数据表格
  const columns_inventorys = [
    {
      title: '序号',
      dataIndex: 'Index',
      key: 'Index',
      with: 20

    },
    {
      title: "行为",
      dataIndex: "number",
      key: "number",
      render: (text, hang) => (
        <div>
          {text > 0 ? <Tag color='blue' bordered={false} className='primary-tag'>补货</Tag> :
            <Tag color='red' bordered={false} className='danger-tag'>{text}</Tag>}
        </div>
      )
    },
    {
      title: "数量",
      dataIndex: "number",
      key: "number",
      render: (text, hang) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
    },
    {
      title: "供应商",
      dataIndex: "supplier",
      key: "supplier",
    },
    {
      title: "时间",
      dataIndex: "time",
      key: "time"
    },
  ]


  //获取单个详情数据
  const getSingleGoods = async () => {
    const res = await GetSingleGoods({ id: id });
    if (res?.result === 0) {
      setDetail(res.data);
      return true
    } else {
      message.error(res?.message);
      return false
    }

  }


  //获取销售数据详情
  const getGoodsOrderDetails = async () => {
    const res = await GetGoodsOrderDetails({
      id: id,
      begin: "",
      end: "",
      page: goodsOrder.page,
      limit: goodsOrder.limit
    });

    if (res?.result === 0) {
      res.data.data.map((d, i) => (d.Index = i + 1));
      setGoodsOrder((goodsOrder) => ({ ...goodsOrder, data: res.data.data, total: res.data.total, loading: false }));
      return true
    } else {
      message.error(res?.message);
      setGoodsOrder((goodsOrder) => ({ ...goodsOrder, loading: false }));
      return false
    }
  }


  //获取库存数据
  const getInventorys = async () => {
    const res = await GetInventorys({
      id: id,
      page: inventorys.page,
      data: inventorys.limit
    });
    if (res?.result === 0) {
      res.data.data.map((d, i) => (d.Index = i + 1))
      setInventorys((inventorys) => ({ ...inventorys, data: res.data.data, total: res.data.total, loading: false }));
      return true
    } else {
      message.error(res?.message);
      setInventorys((inventorys) => ({ ...inventorys, loading: false }));
      return false
    }

  }

  //初始数据渲染
  useEffect(() => {
    const closeFirst = async () => {
      let res_a = await getSingleGoods();
      let res_b = await getGoodsOrderDetails();
      let res_c = await getInventorys();
      if (res_a && res_b && res_c) {
        setFirst(false)
      } else {
        message.error("数据错误")
      }
    }
    closeFirst();
  }, []);


  //监听销售数据
  useEffect(() => {
    setGoodsOrder((goodsOrder) => ({ ...goodsOrder, loading: true }));
    getGoodsOrderDetails();
  }, [goodsOrder.page, goodsOrder.limit, goodsOrder.total]);

  //监听库存数据
  useEffect(() => {
    setInventorys((inventorys) => ({ ...inventorys, loading: true }));
    getInventorys();
  }, [inventorys.page, inventorys.limit, inventorys.total]);


  //销售数据分页方法
  const ordersPageChange = () => {

  }


  return (
    <div className="Containers good_detailIndex " style={{ padding: 0 }}>
      <Skeleton active loading={isFirst} paragraph={{ rows: 15 }}>
        <div className='pds'>
          <Descriptions title="商品详情" layout="vertical" bordered items={items} />
        </div>



        <div className='data_title'>
          <div className='data_title_left'>
            <div className='data_title_name goodOrder-title'>
              销售数据
            </div>
          </div>

          <div className='data_title_right'>


          </div>

        </div>

        <div className='pds'>
          <Table dataSource={goodsOrder.data} columns={columns_goodsOrder} bordered pagination={false} loading={goodsOrder.loading}
            style={{ marginTop: "5px" }}
            scroll={{
              y: 500,
              x: 1300
            }}
          />


          <div className="page-layout">
            <Pagination defaultCurrent={1} total={goodsOrder.total} onChange={(value) => { ordersPageChange(value) }} />
          </div>
        </div>



        <div className='data_title'>
          <div className='data_title_left'>
            <div className='data_title_name inventorys-title'>
              库存数据
            </div>
          </div>

          <div className='data_title_right'>


          </div>

        </div>


        <div className='pds'>
          <Table dataSource={inventorys.data} columns={columns_inventorys} bordered pagination={false} loading={inventorys.loading}
            style={{ marginTop: "5px" }}
            scroll={{
              y: 500,

            }}
          />


          <div className="page-layout">
            <Pagination defaultCurrent={1} total={inventorys.total} onChange={(value) => { ordersPageChange(value) }} />
          </div>
        </div>
      </Skeleton>

    </div>
  )
}


export default GoodDetail